<template>
  <div>
    <a-spin size="large" :spinning="spinning">
      <a-row :gutter="20">
        <a-col :span="8" class="item">
          <a-card hoverable class="add-item" @click="visible = true">
            <a-icon type="plus"/>
            添加车辆
          </a-card>
        </a-col>
        <a-col :span="8" v-for="(item, index) in this.data" :key="index" class="item">
          <a-card hoverable>
            <template slot="actions" class="ant-card-actions">
              <a-tag :color=" item.driving === 0 ? 'orange': 'green'">{{ item.driving === 0 ? '运输中' : '空闲中' }}</a-tag>
              <span>使用记录</span>
            </template>
            <a-card-meta
                :title="'车牌号：' + item.number"
                :description="'ID: ' + item.id + ' 创建时间：' + item.createTime">
              <a-badge :number-style="{ backgroundColor: '#52c41a' }"
                       slot="avatar"
                       :count="item.type"
                       :offset="[-80,10]">
                <img class="image" :src="require('../../assets/' +item.type+'.svg')" alt=""/>
              </a-badge>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>

    <a-modal
        title="新增车辆"
        :visible="visible"
        cancelText="返回"
        okText="确认"
        @ok="submit"
        @cancel="visible = false"
    >
      <a-form-model :model="form">
        <a-form-model-item label="车牌号码">
          <a-input v-model="form.number"/>
        </a-form-model-item>
        <a-form-model-item label="车辆类型">
          <a-select v-model="form.type">
            <a-select-option value="小型汽车">小型汽车</a-select-option>
            <a-select-option value="货车">货车</a-select-option>
            <a-select-option value="卡车">卡车</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "TraVehicle",
  data() {
    return {
      visible: false,
      spinning: false,
      form: {
        number: '京A00000',
        type: '货车'
      },
      data: [],
      imgList: [
        require('../../assets/warehouse0.svg'),
        require('../../assets/warehouse1.svg'),
        require('../../assets/warehouse2.svg'),]
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.spinning = true
      this.getRequest('/api/vehicle/').then(resp => {
        if (resp) {
          this.data = resp
          this.spinning = false
        }
      })
    },
    submit() {
      this.postRequest('/api/vehicle/', this.form).then(resp => {
        if (resp) {
          this.visible = false
          this.loadData()
          this.form = {
            number: '京A00000',
            type: '货车'
          }
        } else {
          this.visible = false
          this.loadData()
          this.form = {
            number: '京A00000',
            type: '货车'
          }
        }
      })
    }
  },
}
</script>

<style scoped>
.add-item {
  text-align: center;
  line-height: 120px;
  min-height: 120px;
  border: 1px dashed #91949c;
}

.add-item:hover {
  border: 1px dashed #5a84fd;
  color: #5a84fd;
}

.item {
  margin-bottom: 20px;
}

.image {
  width: 80px;
  height: 80px;
  margin-left: 20px;
}
</style>